<template>
	<view class="content ">
		<view class="nav">
			<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"
						:class="{'active':isActive==index}" @click="chenked(index)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 内容	 -->
		<view class="minWidth" style="margin-top: 30rpx; margin-left: 40rpx;">
			<view class="" v-for="(item,index) in dataList">
				<view class="flexStarts">
					<view>

						<view class="text" style="font-size: 26rpx;color: #363636;">
							物品名称：钢铁侠
						</view>

						<view class="text" style="font-size: 26rpx;color: #363636;display: flex;align-items: center;">
							价格：<view style="color: red;">￥2000</view>
						</view>
					</view>
					<view>
						详情
					</view>
				</view>

				<view class="flexStart" style="margin-top: 20rpx;">
					<view class="toppingBox">
						漫威
					</view>
					<view class="toppingBox categoryBox" style="margin-left: 20rpx;">
						生活服务
					</view>

					<view class="toppingBox categoryBox" style="margin-left: 20rpx;">
						个人认证
					</view>
					<view class="toppingBox categoryBox" style="margin-left: 20rpx;">
						优选商家
					</view>
				</view>

				<view class="tagTitle">
					新旧程度： 日结兼职25/小时
				</view>
				<view class="tagTitle">
					入手渠道： 贵阳优生活
				</view>
				<view class="tagTitle">
					转手原因： 给大家发福利
				</view>
				<view class="tagTitle">
					发货方式： 自提
				</view>
				<view class="tagTitle">
					上传图片：
					<view class="imgBox" style="margin-top: 30rpx;">
						<image src="../../static/other/111.jpg" mode="widthFix"></image>
					</view>
				</view>
				<button class="button"  @click="switchBtn(0)">立即购买</button>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {
			return {
				isActive: 0,
				index: 0,
				currentindex: 0,
				dataList: [{

				}],

				category: [{
						id: 1,
						name: '最新发布',
					},
					{
						id: 2,
						name: '好物捡漏',
					},
					{
						id: 3,
						name: '公益捐赠',
					},
					{
						id: 4,
						name: '收藏',

					},
					{
						id: 5,
						name: '上门回收',
					},
					{
						id: 6,
						name: '抵押变现',
					},
					{
						id: 7,
						name: '最新求购',
					},
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
			}
		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
				query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.category[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.category[i].width = data[i].width
					}
				}).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;
			}
		}
	}
</script>
<style lang="scss">
	.minWidth {
		width: 680rpx;
		margin: 0 auto;
	}


	page {
		height: 100%;
		display: flex;
		background-color: #FFFFFF;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;

		.nav {
			border-top: 1rpx solid #f2f2f2;
			background-color: #f5f5f5;
			border-bottom: #b6b6b6 1rpx solid;
			// position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {
						line-height: 60rpx;
						margin-right: 35rpx;
						flex-shrink: 0;
						padding-bottom: 10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 120rpx;
			flex: 1;

			.swiperitem-content {
				background-color: #ffffff;

				.nav_item {
					background-color: #FFFFFF;
					padding: 20rpx 40rpx 0rpx 40rpx;
				}
			}
		}
	}
.button{
	background-color:$uni-color-warning ;
	color: white;
}
	.active {
		position: relative;
		color: #373737;
		font-weight: 600;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 120rpx;
		height: 7rpx;
		background-color: #f69000;
		border-radius: 10rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	.headImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
	}

	.flexStart {
		display: flex;
		align-items: center;
	}

	.flexStarts {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.text {
		font-size: 20rpx;
		color: #868686;
	}

	.toppingBox {
		width: 70rpx;
		background-color: #f69000;
		height: 35rpx;
		color: #ffffff;
		font-size: 20rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 5rpx;
	}

	.categoryBox {
		background-color: #00c8aa;
		width: 120rpx;
	}

	.imgBox {
		width: 220rpx;
		height: 150rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.tagTitle {
		color: #515151;
		font-size: 26rpx;
		margin: 30rpx 0;
	}
</style>